<template>
  <header class="flex justify-between items-center">
    <!-- 路径 -->
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item v-for="path in paths" :key="path">{{ path }}</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 功能按钮 -->
    <div class="flex items-center space-x-3">
      <transition name="fade" mode="out-in" @click="toggleTheme">
        <span v-if="!isDark" class="i-tabler:moon-filled text-light-300 text-[1.45rem] cursor-pointer"></span>
        <span v-else class="i-tabler:sun-filled text-light-300 text-2xl cursor-pointer"></span>
      </transition>
    </div>
  </header>
</template>

<script setup lang="ts" name="global-header">
import { useConfigStore } from '@/store'
import { useDark } from '@vueuse/core'

// 设置面包屑
const route = useRoute()
const paths = ref([] as string[])
watch(
  () => route.matched,
  (matched) => {
    const matches = matched.slice(1)
    paths.value = matches.map((v) => v.meta.label as string)
  },
  {
    immediate: true
  }
)

// 设置主题
const { theme } = toRefs(useConfigStore())
const isDark = useDark()
const toggleTheme = () => {
  isDark.value = !isDark.value
  theme.value = isDark.value ? 'dark' : 'light'
}
</script>

<style scoped></style>
